{% extends 'base.html' %}
{% block title %}
{{name}}
{% endblock %}
{% block content %}
<div class="am-container">

    <div class="am-u-sm-12" style="margin-top: 10px;">
        <div class="am-panel am-panel-default">
            <div class="am-panel-hd">{{name}}</div>
            <div class="am-panel-bd">
                {% for post in posts %}
                <div style="border-bottom: 1px solid;border-color: #eeeeee;">
                    <a href="{% url 'post_detail' post.key %}">{{ post.title }}</a>
                    <strong style="float: right;"><a href="{% url 'userinfo' post.user.key %}"
                            style="color: {{ post.user.color }};">{{ post.user.username }}</a>
                    </strong>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% if request.session.is_login and not request.session.is_forbidden %}
<div class="am-container">
    <div class="am-u-sm-12">
        <form action="{% url 'plate_detail' key %}" method="POST" class="am-form">
            {% csrf_token %}
            <input type="text" name="title" placeholder="请输入标题...">
            <div id="editor"></div>
            <textarea type="text" name="text" id="text" style="display: none;"></textarea>
            <button type="submit" class="am-btn am-btn-primary am-radius" style="margin-top: 10px;">提交</button>
        </form>

    </div>
</div>

{% endif %}

<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script>
    var Editor = window.wangEditor
    var editor = new Editor('#editor')
    editor.customConfig.menus = [
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'link',
        'emoticon',
        'code',
        'undo', // 撤销
        'redo',
        'image',
    ]
    editor.customConfig.emotions = [{
        // tab 的标题
        title: 'emoji',
        // type -> 'emoji' / 'image'
        type: 'emoji',
        // content -> 数组
        content: ['😀', '😃', '😄', '😁', '😆', '😂', '😅', '😎', '😋', '😊', '😉', '😐', '😣', '😥', '🥰',
            '😜', '🤪', '😡'
        ]
    }]
    var $text = $('#text')
    setInterval("change();", 10);

    function change() {
        $text.val(editor.txt.html());
    }
    editor.create()
    // 初始化 textarea 的值
    $text.val(editor.txt.html())
</script>
{% endblock %}